﻿<UserControl x:Class="WpfApplication1.ModulerMenu"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Width="180"
             FlowDirection="RightToLeft"
             x:Name="modulerMenu">
    <UserControl.Resources>
        <SolidColorBrush x:Key="MainBackground" Color="#353535" />
        <SolidColorBrush x:Key="SubBackground" Color="#424242" />
        <SolidColorBrush x:Key="NormalForeground" Color="#999999" />
        <SolidColorBrush x:Key="SliderBackground" Color="#292929" />
        <Color x:Key="SelectedBackgroundColor">#FF292929</Color>
        <Color x:Key="SelectedUnfocusedColor">#FF292929</Color>

        <Style TargetType="ListBoxItem">
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="Border" 
                                BorderThickness="{TemplateBinding BorderThickness}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="slider" 
                                                             Storyboard.TargetProperty="Width" 
                                                             To="130" Duration="0:0:.3"
                                                             AccelerationRatio="1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" 
                                                                          Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" 
                                                                     Value="{StaticResource SelectedBackgroundColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedUnfocused">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" 
                                                                          Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" 
                                                                     Value="{StaticResource SelectedUnfocusedColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Grid>
                                <Border x:Name="slider" 
                                        Background="{StaticResource SliderBackground}"
                                        Width="0" 
                                        HorizontalAlignment="Left" />

                                <ContentPresenter Margin="{TemplateBinding Padding}" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="{x:Type ListBox}">
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="Foreground" Value="{StaticResource NormalForeground}" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
            <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
        </Style>

        <EventTrigger x:Key="closeMain" RoutedEvent="ListBox.MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="lbMain" 
                                     Storyboard.TargetProperty="Width" 
                                     From="180" To="50" 
                                     Duration="0:0:.4" 
                                     AccelerationRatio="1" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>

        <EventTrigger x:Key="openMain" RoutedEvent="ListBox.MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="lbMain" 
                                     Storyboard.TargetProperty="Width" 
                                     From="50" To="180" 
                                     Duration="0:0:.4"
                                     AccelerationRatio="1" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </UserControl.Resources>

    <Grid x:Name="mainWrapper">

        <Grid Width="130" HorizontalAlignment="Right">
            <Grid.RowDefinitions>
                <RowDefinition Height="30" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Label Grid.Row="0" 
                   Content="{Binding ElementName=modulerMenu, Path=SelectedLinkGroup.DisplayName}" 
                   HorizontalContentAlignment="Center" 
                   VerticalContentAlignment="Center" 
                   Foreground="White" 
                   Background="{StaticResource SubBackground}"
                   FontFamily="AdvertisingMedium" 
                   BorderThickness="0,0,0,1"
                   BorderBrush="#353535"
                   FontSize="14" />

            <ListBox x:Name="lbSub" 
                     Grid.Row="1"
                     Background="{StaticResource SubBackground}"
                     ItemsSource="{Binding ElementName=modulerMenu, Path=SelectedLinkGroup.Links}"
                     SelectedItem="{Binding ElementName=modulerMenu, Path=SelectedLink}">
                <ListBox.Resources>
                    <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
                        <Setter Property="Height" Value="68" />
                        <Setter Property="BorderThickness" Value="0,0,0,1" />
                        <Setter Property="BorderBrush" Value="#353535" />
                        <Setter Property="Padding" Value="8" />
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="LightBlue" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ListBox.Resources>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>

                            <Path Grid.Row="0" 
                                  Width="32" 
                                  Height="32" 
                                  Fill="{Binding ElementName=tb, Path=Foreground}"
                                  Data="{Binding Path=Icon}"
                                  Stretch="Uniform" />

                            <TextBlock x:Name="tb" 
                                       Grid.Row="1" 
                                       HorizontalAlignment="Center" 
                                       Margin="0" 
                                       Text="{Binding Path=DisplayName}" 
                                       FontFamily="AdvertisingBold" 
                                       FontSize="11" />
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>

        <ListBox x:Name="lbMain" 
                 Width="50" 
                 HorizontalAlignment="Left"
                 Background="{StaticResource MainBackground}"
                 ItemsSource="{Binding ElementName=modulerMenu, Path=LinkGroups}"
                 SelectedItem="{Binding ElementName=modulerMenu, Path=SelectedLinkGroup, Mode=TwoWay}">
            <ListBox.Resources>
                <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
                    <Setter Property="Height" Value="50" />
                    <Setter Property="BorderThickness" Value="0,0,0,1" />
                    <Setter Property="BorderBrush" Value="#3a3a3a" />
                    <Setter Property="Padding" Value="0" />
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="White" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ListBox.Resources>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Path Grid.Column="0" 
                              Margin="9" 
                              Width="32" 
                              Height="32" 
                              Fill="{Binding ElementName=tb, Path=Foreground}"
                              Data="{Binding Path=Icon}" 
                              Stretch="Uniform" />

                        <TextBlock x:Name="tb" 
                                   Grid.Column="1" 
                                   Margin="13,0,5,0" 
                                   FontSize="24" 
                                   VerticalAlignment="Center" 
                                   Text="{Binding Path=DisplayName}" 
                                   FontFamily="AdvertisingMedium" />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>
